<template>
    <div>
        <div class="flex1">
            <div class="demo-image__placeholder">
                <div class="block2">
                    <img class="pic" src="../../assets/catinfo_img/2.jpg" alt="">
                </div>
            </div>
            <div class="text" style="text-indent:2em">
                    英国短毛猫是传统英国本地猫纯种版本，具有鲜明的矮胖的身体，密集的外衣和广阔的脸。
                        早期中国人称之为英短蓝猫，学名应该称为英国蓝色短毛猫。
                        最熟悉的彩色变种是“英国蓝”，一个坚实的蓝灰色的外衣和铜颜色的眼睛，
                        但该品种也已在范围广泛的其他颜色和图案。最典型的特征是此猫有五短，
                        即：毛短、身材短、尾巴短、四肢短、耳朵短。
            </div>
        </div>

         <el-divider></el-divider>

        <div class="flex2">
            <div class="tablebox">
                <el-table class="table" :data="tableData" stripe style="width: 50% show-header:false" :show-header="false" :highlight-current-row="true">
                    <el-table-column prop="date" label="日期" width="290"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="290"></el-table-column>
                </el-table>
            </div>
            
            <div class="text" style="text-indent:2em">
                    该品种的温厚的外观和相对平静的气质使之成为经常媒体明星，
                    特别是为灵感来自爱丽丝梦游仙境柴郡猫的坦尼尔的著名例证。
                    在更现代的时代，一个蓝色的英国短毛猫是原始的主题为“我能一直Cheezburger？”形象，记入与普及lolcat现象。
            </div>
        </div>

        <div class="btn" >
            <el-button type="text" plain @click="dialogFormVisible = true" style="font-size:30px;color:#F08080;background-color:#FFF8DC">修改</el-button>
        </div>

        <el-dialog title="请输入信息" v-model="dialogFormVisible">
            <el-form :model="form" style="width:80%">

                <el-form-item label="名字" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="生日" :label-width="formLabelWidth">
                    <el-input v-model="form.date" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="品种" :label-width="formLabelWidth">
                    <el-input v-model="form.type" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="爱好" :label-width="formLabelWidth">
                    <el-input v-model="form.hobby" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        
    </div>
</template>

<script>
    export default {
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
        },
            
        data() {
            return {
                dialogFormVisible: false,
                form: {
                    name: '',
                    age:'',
                    date: '',
                    type: '',
                    hobby:'',
                },
                formLabelWidth: '120px',
                src: '../../assets/catinfo_img/2.jpg',
                activeName: 'second',
                tableData: [
                    {
                        date: '姓名',
                        name: '龙猪',
                    }, 
                    {
                        date: '年龄',
                        name: '10个月',
                    }, 
                    {
                        date: '生日',
                        name: '6月20日',
                    }, 
                    {
                        date: '品种',
                        name: '英短蓝猫',
                    },
                    {
                        date: '爱好',
                        name: '睡觉',
                    }]
                }
            }
    }
</script>

<style lang="less" scoped>
    .demo-image__placeholder{
        width:50%;
        padding-top: 5px;
    }
     .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before, .clearfix:after {
        display: table;
        content: "";
    }
   .clearfix:after {
        clear: both
    }

   .box-card {
        width: 480px;
   }
   .text item{
       padding-top:10px;
   }
   .pic{
       width: 590px;
       padding-left: 0px;
   }
   .block2{
       border-top:1px solid rgb(238, 46, 190);
   }
   .table{
       width: 100%;
       font-size: 20px;
   }
   .tablebox{
        padding-top: 40px;
   }
   .text{
       font-size: 25px;
        width:500px;
        padding-left: 50px;
        line-height:50px;
   }
   .flex1{
        display: flex;
   }
   .flex2{
        display: flex;
   }
   .el-divider{
       color: white !important;
   }
   .btn{
       text-align: center;
   }
   
</style>